<template>
	<div>
		<a-descriptions class="descri labelRit">
			<a-descriptions-item label="应用来源">{{ appConfig.appSource == 1 ? '门户' : '非门户' }} </a-descriptions-item>
			<a-descriptions-item label="版本号">{{ appConfig.appVersion }} </a-descriptions-item>
			<a-descriptions-item label="移动端appId" v-if="appConfig.appAppId">{{ appConfig.appAppId
				}}</a-descriptions-item>
			<a-descriptions-item label="版本说明">{{ appConfig.appVersionNote }} </a-descriptions-item>
			<a-descriptions-item label="应用名称" v-if="appConfig.name">{{ appConfig.name }} </a-descriptions-item>
			<a-descriptions-item label="应用访问url地址">{{ appConfig.appUrl }} </a-descriptions-item>
			<a-descriptions-item label="是否展示图标">{{ appConfig.isHideLogo == 1 ? '是' : '否' }} </a-descriptions-item>
			<!-- <a-descriptions-item label="移动端上线时间">{{ appConfig.appOnlineTime }} </a-descriptions-item> -->
			<a-descriptions-item label="参数信息" :contentStyle="contentStyle" class="scro">{{ appConfig.param }}
			</a-descriptions-item>
		</a-descriptions>
		<a-descriptions class="descri labelRit">
			<a-descriptions-item label="移动端logo（存量）">
				<AuthImg class="img-item" :authSrc="appLogo" />
			</a-descriptions-item>
			<a-descriptions-item label="网络打通截图" v-if="appConfig.intelPassPhoto">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(appConfig.intelPassPhoto)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="应用使用界面" v-if="appConfig.appInterfacePhoto && !isTest">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(appConfig.appInterfacePhoto)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="联通办公测试环境验证报告" v-if="appConfig.ltbgTestUpdateDoc && !isTest">
				<div class="file-box">
					<div v-for="item in JSON.parse(appConfig.ltbgTestUpdateDoc)" :key="item.url"
						@click="downloadFile(item)" class="file-item">
						<paper-clip-outlined style="margin-right: 5px" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="联通办公生产环境验证报告" v-if="appConfig.ltbgProdUpdateDoc && !isTest">
				<div class="file-box">
					<div v-for="item in JSON.parse(appConfig.ltbgProdUpdateDoc)" :key="item.url"
						@click="downloadFile(item)" class="file-item">
						<paper-clip-outlined style="margin-right: 5px" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="安扫报告" v-if="appConfig.anSaoDoc && !isTest">
				<div class="file-box">
					<div v-for="item in JSON.parse(appConfig.anSaoDoc)" :key="item.url" @click="downloadFile(item)"
						class="file-item">
						<paper-clip-outlined style="margin-right: 5px" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
			<!-- <a-descriptions-item label="其他截图" v-if="appConfig.otherScreenshots && !isTest">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(appConfig.otherScreenshots)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item> -->
		</a-descriptions>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="imageUrl" />

		</a-modal>
	</div>
</template>

<script setup name="AppConfig">
import AuthImg from '@/components/authImg/index.vue'
import tool from '@/utils/tool'
import { useRoute } from 'vue-router'
const route = useRoute()
const { propertiesId, isTest } = route.query
const formData = ref({
	param: ''
})
const datas = inject('detailDate')
const currentName = inject('currentName')

const showParam = ref(false)

const appConfig = datas.value?.appInfoAppPropertiesAddParam
// if (isTest) {
// 	appConfig = datas.value?.appInfoAppPropertiesAddParam
// } else {
// 	if (propertiesId) {
// 		appConfig = datas.value?.appPropertiesList.find((v) => v.id === propertiesId)
// 	} else {
// 		appConfig = datas.value?.appPropertiesList[0]
// 	}
// }

const showRea = computed(() => {
	let bool = false
	const approvalType = tool.session.get('approvalType')
	const doneStatus = tool.session.get('doneStatus')
	if ((approvalType === '0' || approvalType === '8') && !doneStatus) {
		bool = true
	}
	return bool
})
const contentStyle = {
	maxHeight: '64px',
	overflowY: 'auto'
}
watch(
	currentName,
	(newData, oldData) => {
		if (newData === '运营组审核') {
			if (appConfig.param) {
				showParam.value = true
			}
			formData.value.param = appConfig.param
			tool.session.set('param', formData.value.param)
		}
	},
	{ immediate: true }
)
const handleChange = () => {
	tool.session.set('param', formData.value.param)
}

const fileUrl = import.meta.env.VITE_FILE_URL_W
const appLogo = computed(() => {
	let str = ''
	if (appConfig.appLogo) {
		str = `${fileUrl}/${JSON.parse(appConfig.appLogo)[0].url}`
	}
	return str
})

const imageUrl = ref('')
let previewVisible = ref(false)
const handlePreview = (url) => {
	imageUrl.value = url
	previewVisible.value = true
}
const handleCancel = () => {
	previewVisible.value = false
}
const downloadFile = (item) => {
	console.log(item, 'item')
	const fileUrl = import.meta.env.VITE_FILE_URL
	const path = item.url.includes('http://') ? item.url : `${fileUrl}/${item.url}`
	const name = item.name
	const xhr = new XMLHttpRequest()
	console.log(path, 'path')
	xhr.open('get', path)
	xhr.setRequestHeader('Token', tool.data.get('TOKEN'))
	xhr.responseType = 'blob'
	xhr.send()
	xhr.onload = function () {
		if (this.status === 200 || this.status === 304) {
			const fileReader = new FileReader()
			fileReader.readAsDataURL(this.response)
			fileReader.onload = function () {
				const a = document.createElement('a')
				a.style.display = 'none'
				a.href = this.result
				a.download = name
				document.body.appendChild(a)
				a.click()
				document.body.removeChild(a)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.descri {
	margin-top: 10px;
}

.img-sty {
	width: 104px;
	height: 104px;
	cursor: pointer;
}

.file-box {
	cursor: pointer;
}

.foem .ant-form-item {
	width: 82%;
}

:deep(.ant-image-img) {
	max-height: 88px;
}
</style>

<style>
.scro::-webkit-scrollbar {
	width: 6px;
	height: 10px;
}

.scro::-webkit-scrollbar-track {
	width: 4px;
	background: rgba(#101F1C, 0.1);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.scro::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, .5);
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	transition: background-color .3s;
	cursor: pointer;
}

.scro::-webkit-scrollbar-thumb:hover {
	background-color: rgba(144, 147, 153, .3);
}
</style>
